<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item class="query-form-item">
          <span>晋升类型：</span>
          <el-select
            v-model="query.promotioncategoryid"
            placeholder="请选择晋升类型"
            clearable
            @change="onSubmit"
          >
            <!-- <el-option label="全部" value></el-option> -->
            <el-option
              v-for="item in dataList"
              :key="item.promotioncategoryid"
              clearable
              @change="onSubmit"
              :label="item.categoryname"
              :value="item.promotioncategoryid"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 审核状态 -->
        <el-form-item class="query-form-item">
          <span>审核状态：</span>
          <el-select
            v-model="query.auditstatus"
            placeholder="请选择状态"
            @change="onSubmit"
            clearable
          >
            <!-- <el-option label="全部" value></el-option> -->
            <el-option label="审核中" value="0"></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="驳回" value="2"></el-option>
          </el-select>
        </el-form-item>

        <!-- 生效状态 -->
        <el-form-item class="query-form-item">
          <span>生效状态：</span>
          <el-select
            v-model="query.effectivestatus"
            placeholder="请选择状态"
            @change="onSubmit"
            clearable
          >
            <!-- <el-option label="全部" value></el-option> -->
            <el-option label="已生效" value="1"></el-option>
            <el-option label="未生效" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="query" class="query-form" size="small">
        <el-form-item>
          <span>商户账号：</span>
          <el-form-item class="query-form-item">
            <el-input
              v-model="query.account"
              placeholder="商户账号"
              prefix-icon="el-icon-search"
              @keyup.enter.native="onSubmit"
              clearable
            ></el-input>
          </el-form-item>
          <span>企业名称：</span>
          <el-form-item class="query-form-item">
            <el-input
              v-model="query.enterprisename"
              placeholder="请输入企业名称"
              prefix-icon="el-icon-search"
              @keyup.enter.native="onSubmit"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onRest"
            ></el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form-item>
      </el-form>
      <!--查询条件end-->

      <!-- table表单 -->
      <el-table
        ref="singleTable"
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="auditstatus"
          align="center"
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.auditstatus == 0" style="color: #ffa659"
              >审核中</span
            >
            <span v-else-if="scope.row.auditstatus == 1" style="color: #4acf1e"
              >通过</span
            >
            <span v-else-if="scope.row.auditstatus == 2" style="color: #dc0101"
              >驳回</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="effectivestatus"
          align="center"
          label="生效状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.effectivestatus == 0" style="color: #ffa659"
              >未生效</span
            >
            <span
              v-else-if="scope.row.effectivestatus == 1"
              style="color: #4acf1e"
              >已生效</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="enterprisename"
          align="center"
          label="企业名称"
          width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.enterprisename">{{
              scope.row.enterprisename
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryname"
          align="center"
          label="晋升类型"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="account"
          align="center"
          label="商户账号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="brandname"
          align="center"
          label="商户隶属品牌"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="company"
          align="center"
          label="商户任职公司"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="identity"
          align="center"
          label="商户身份"
          width="200"
        ></el-table-column>

        <el-table-column
          prop="createtime"
          align="center"
          label="申请生成时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.createtime != null"></i>
            <span v-if="scope.row.createtime != null">{{
              scope.row.createtime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="audittime"
          align="center"
          label="申请审核时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.audittime != null"></i>
            <span v-if="scope.row.audittime != null">{{
              scope.row.audittime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="effectivetime"
          align="center"
          label="申请生效时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.effectivetime != null"></i>
            <span v-if="scope.row.effectivetime != null">{{
              scope.row.effectivetime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作"
          width="120px"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="
                (dialogFormVisible = true), handleDtail(scope.$index, scope.row)
              "
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--列表end --222e-->

      <!--分页模块start-->
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
      <!--分页模块end-->
      <!-- dialog详情页 -->
      <el-dialog
        title="查看详情"
        :visible.sync="dialogFormVisible"
        width="50%"
        top="5vh"
        :close-on-click-modal="false"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              查看详情
            </span>
          </div>
        </template>
        <el-card>
          <el-form :model="tableList">
            <el-form-item
              label-width="200px"
              label="申请类型："
              style="width: 100%; display: inline-block"
            >
              <span>{{ tableList.categoryname }}</span>
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="申请状态："
              style="width: 100%; display: inline-block"
            >
              <span>{{
                tableList.auditstatus == 0
                  ? "审核中"
                  : tableList.auditstatus == 1
                  ? "通过"
                  : "驳回"
              }}</span>
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="申请状态："
              style="width: 100%; display: inline-block"
            >
              <span>{{
                tableList.effectivestatus == 0 ? "未生效" : "已生效"
              }}</span>
            </el-form-item>
          </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <!--查看弹框start-->
      <el-dialog
        :title="formMap[formName]"
        :visible.sync="detailVisible"
        :before-close="hideDetailForm"
        :close-on-click-modal="false"
        width="50%"
        top="5vh"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              {{ formMap[formName] }}
            </span>
          </div>
        </template>
        <el-card>
          <el-form label-width="140px">
            <el-form-item style="background: #e1e1e1">
              <span style="color: #3a3a3a; margin-left: -120px"
                >用户信息（{{ formData.enterprisename }}）</span
              >
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="头像："
                style="width: 30%; display: inline-block"
              >
                <!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
                <el-popover
                  v-if="formData.userpic"
                  placement="right"
                  trigger="hover"
                >
                  <img
                    :src="formData.userpic"
                    style="width: 400px; border-radius: 3px"
                  />
                  <img
                    slot="reference"
                    :src="formData.userpic"
                    style="
                      max-height: 80px;
                      max-width: 50px;
                      border-radius: 5px;
                    "
                  />
                </el-popover>
                <span v-else>-</span>
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="昵称："
                style="width: 30%; display: inline-block"
              >
                <input v-model="formData.usernick" type="text" readonly />
              </el-form-item>
              <el-form-item
                label="手机号："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input v-model="formData.usermobile" type="text" readonly />
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="账户余额："
                style="width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.usersurplusintegral"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="总业绩："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.usertotalintegral"
                  type="text"
                  readonly
                />
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="代理商品业绩："
                style="width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.commodityperformance"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="非代理商品业绩："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.nonagencyachievement"
                  type="text"
                  readonly
                  @click="tomyorder(formData.userid)"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="注册时间："
                style="width: 30%; display: inline-block"
              >
                <input
                  :value="formData.userregisttime | formatDateStr('yyyy-MM-dd')"
                  type="text"
                  readonly
                />
              </el-form-item>
              <el-form-item
                label="用户订单："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input
                  v-model="formData.countouder"
                  type="text"
                  readonly
                  @click="tomyorder(formData.userid)"
                />
              </el-form-item>
            </el-form-item>

            <el-form-item
              style="border-bottom: 1px solid #ebeef5"
              label-width="0px"
            >
              <el-form-item
                label="优惠券："
                style="width: 30%; display: inline-block"
              >
                <input v-model="formData.busdiscount" type="text" readonly />
              </el-form-item>
              <el-form-item
                label="收藏："
                style="margin-left: 80px; width: 30%; display: inline-block"
              >
                <input v-model="formData.usercount" type="text" readonly />
              </el-form-item>
            </el-form-item>

            <div v-if="formData.superioruser != null">
              <el-form-item style="background: #e1e1e1">
                <span style="color: #3a3a3a; margin-left: -120px"
                  >服务商城信息（{{
                    formData.superioruser.enterprisename
                  }}）</span
                >
              </el-form-item>

              <el-form-item
                style="border-bottom: 1px solid #ebeef5"
                label-width="0px"
              >
                <el-form-item
                  label="昵称："
                  style="width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.usernick"
                    type="text"
                    readonly
                  />
                </el-form-item>
                <el-form-item
                  label="手机号："
                  style="margin-left: 80px; width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.usermobile"
                    type="text"
                    readonly
                  />
                </el-form-item>
              </el-form-item>
              <el-form-item
                style="border-bottom: 1px solid #ebeef5"
                label-width="0px"
              >
                <el-form-item
                  label="账户余额："
                  style="width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.usersurplusintegral"
                    type="text"
                    readonly
                  />
                </el-form-item>
                <el-form-item
                  label="总业绩："
                  style="margin-left: 80px; width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.usertotalintegral"
                    type="text"
                    readonly
                  />
                </el-form-item>
              </el-form-item>
              <el-form-item
                style="border-bottom: 1px solid #ebeef5"
                label-width="0px"
              >
                <el-form-item
                  label="代理商品业绩："
                  style="width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.commodityperformance"
                    type="text"
                    readonly
                  />
                </el-form-item>
                <el-form-item
                  label="非代理商品业绩："
                  style="margin-left: 80px; width: 30%; display: inline-block"
                >
                  <input
                    v-model="formData.superioruser.nonagencyachievement"
                    type="text"
                    readonly
                  />
                </el-form-item>
              </el-form-item>
            </div>
          </el-form>
        </el-card>
      </el-dialog>
      <!--查看弹框end-->
    </el-card>
  </div>
</template>
<script>
import {
  queryAllApplyHDpage,
  selectProduction,
} from "../../api/levelAudit/applyTakeEffect";
export default {
  data() {
    return {
      query: {
        //查询条件
        promotioncategoryid: "",
        auditstatus: "",
        effectivestatus: "",
        account: "",
        currentPage: 1,
        pageSize: 5,
        enterprisename: "",
      },
      dataList: [],
      tableData: [], //列表集合
      tableList: {}, //详情框信息
      totalNumber: 0, //分页总页数
      loading: true, //列表加载
      detailVisible: false,
      formData: {}, //详情的对象
      formName: null,
      dialogTableVisible: false,
      dialogFormVisible: false,
      formMap: {
        detail: "详情",
        reject: "驳回",
      },
    };
  },
  methods: {
    // 下拉框获取数据
    selectProduction() {
      selectProduction()
        .then((data) => {
          // console.log(data)
          this.dataList = data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    /*获取列表事件*/
    getList() {
      this.loading = true;
      console.log(this.query);
      let data = this.query;
      queryAllApplyHDpage(data)
        .then((response) => {
          console.log(response);
          if (response.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          this.tableData = response.data.list || [];
          this.totalNumber = response.data.totalNumber || 0;
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
        });
    },
    handleDtail(i, val) {
      //  console.log(i)
      //  console.log(val)
      //列表详情赋值
      this.tableList = val || {};
      // console.log(this.tableList)
    },
    /*列表查询条件事件*/
    onSubmit() {
      this.query.currentPage = 1;
      this.getList();
    },

    /*刷新*/
    onRest() {
      //刷新事件需要重置查询条件

      this.query = {
        promotioncategoryid: "",
        auditstatus: "",
        effectivestatus: "",
        account: "",
        currentPage: 1,
        pageSize: 5,
        enterprisename: "",
      };
      this.getList();
    },

    //显示 查看弹框
    detailForm(index, row) {
      if (row !== null) {
        this.formData = Object.assign({}, row);
        this.formName = "detail";
        this.detailVisible = true;
      }
    },
    // 隐藏详情弹框
    hideDetailForm() {
      // 更改值
      this.detailVisible = !this.detailVisible;
      this.formData = {};
      return true;
    },

    /*点击页数*/
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getList();
    },

    /*选择每页条数【10,20,30,40,50】*/
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getList();
    },
  },
  mounted() {
    this.selectProduction();
    // this.applicationList()
  },
  created() {
    this.getList();
  },
};
</script>
